<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="root">
    <el-container>
        <el-header>
            <div class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <span class="navbar-brand">在线珠宝商城后台管理</span>
                    </div>
                    <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
                    <ul v-if="user === null" class="nav navbar-nav">
                        <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                        <li class="divider"></li>
                        <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
                    </ul>
                    <ul class="nav navbar-nav" v-if="user !== null">
                        <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../back/user/update.html">用户中心</a></li>
                    </ul>
                </div>
            </div>
        </el-header>
        <el-main>
            <el-row type="flex" class="row-bg" justify="space-around">
                <!-- 导航栏 -->
                <el-col :span="2" style="width: 200px">
                    <el-menu style="width: 200px"
                             default-active="2"
                             class="el-menu-vertical-demo"
                             unique-opened
                             @open="handleOpen">
                        <el-submenu index="category">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>类别管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="addCategory(1)">一级类别添加</el-menu-item>
                                <el-menu-item index="1-2" @click="addCategory(2)">二级类别添加</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!-- 商品管理 -->
                        <el-submenu index="product">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>珠宝管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="openProductDialog">珠宝添加</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!--订单管理-->
                        <el-menu-item index="order" @click="handleOpen('order')">
                            <i class="el-icon-setting"></i>
                            <span slot="title">订单管理</span>
                        </el-menu-item>
                        <!--用户管理-->
                        <el-menu-item index="user" @click="handleOpen('user')">
                            <i class="el-icon-setting"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <div style="width: 50px"></div>
                <div v-if="tableData === null"
                     style="display: flex; justify-content: center; align-items: center; height: auto; width: 1500px">
                    <h2>在线珠宝商城后台管理，欢迎 Admin！</h2>
                </div>
                <el-col :span="6" style="width: 1600px">
                    <!-- ******************************************表格****************************************** -->
                    <el-table
                            v-if="tableData !== null"
                            empty-text="暂无数据"
                            stripe
                            border
                            max-height="300"
                            :data="tableData"
                            style="width: 1200px">
                        <template slot-scope="scope">
                            <el-table-column
                                    v-for="label in labels"
                                    :label="label.name"
                                    :prop="label.prop"
                            >
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    fixed="right"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-row type="flex" class="row-bg" justify="space-around">
                                        <el-col :span="12">
                                            <el-button
                                                    size="mini"
                                                    @click="edit(scope.row)">编辑
                                            </el-button>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="remove(scope.row)">删除
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>


    <!-- ***********************类别添加对话框********************************* -->
    <el-dialog :title="categoryDialogInfo.title" :visible.sync="categoryDialogInfo.isShow">
        <el-form>
            <el-form-item v-if="categoryDialogInfo.level === 2" label="一级标题">
                <el-select v-model="category.pId" placeholder="请选择一级类别">
                    <el-option v-for="category in categories"
                               :label="category.categoryName"
                               :value="category.categoryId"
                               :key="category.categoryId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="categoryDialogInfo.level === 2 ? '二级标题' : '一级标题'">
                <el-input v-model="category.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="categoryDialogInfo.isShow = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdateCategory">确 定</el-button>
        </div>
    </el-dialog>

    <!-- *********************** 珠宝添加对话框********************************* -->
    <el-dialog :title="productDialogInfo.title" :visible.sync="productDialogInfo.isShow">
        <el-form>
            <el-form-item label="名称">
                <el-input v-model="product.productName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="product.stock" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="product.categoryId" placeholder="请选择类别">
                    <el-option v-for="category in childCategories"
                               :label="category.categoryName"
                               :value="category.categoryId"
                               :key="category.categoryId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="原价">
                <el-input v-model="product.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="折扣价">
                <el-input v-model="product.jprice" autocomplete="off"></el-input>
            </el-form-item>
            <!--文件上传尝试一-->
            <el-form-item label="选择图片（路径中不要出现中文）">
                <el-upload
                        class="avatar-uploader"
                        action="/pro/upload"
                        name="file"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="Url" :src="'http://localhost:8080/images/'+product.imageUrl" class="avatar" style="width: 300px; height: 350px;">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>


            <el-form-item label="颜色">
                <el-input v-model="product.color" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重量">
                <el-input v-model="product.weight" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="材质">
                <el-input v-model="product.material" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="纯度">
                <el-input v-model="product.purity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="镶嵌方式">
                <el-input v-model="product.craftsmanship" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="认证方式">
                <el-input v-model="product.certification" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input type="textarea" v-model="product.desc" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="productDialogInfo.isShow = false">取 消</el-button>
            <el-button type="primary" @click="addProduct">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script type="text/javascript">
    let vm = new Vue({
        el: '#root',
        data: {
            user: null,
            index: 0,
            categoryDialogInfo: {
                isShow: false,
                title: '添加类别',
                level: 0,
            },
            productDialogInfo: {
                isShow: false,
                title: '珠宝添加',
            },
            categories: [],
            childCategories: [],
            category: {
                pId: null,
                cId: null,
                name: '',
            },
            tableData: null,
            // products: [],
            Url:"",
            product: {
                productId: null,
                productName: "",
                desc: "",
                price: "",
                jprice: "",
                stock: "",
                sale: "30",
                categoryId: null,
                imageUrl: "",
                color: "",
                weight: "",
                material: "",
                purity: "",
                craftsmanship: "",
                certification: ""
            },
            page: {}
        },
        created() {
            this.isLogin();
            this.getCategories();
            this.getChildCategories();
            // this.updateData();
        },
        computed: {
            labels() {
                if (this.index === 'category') {
                    return [
                        {
                            name: '级别',
                            prop: 'levelName'
                        },
                        {
                            name: '类别',
                            prop: 'categoryName'
                        }
                    ]
                } else if (this.index === 'product') {
                    return [
                        {
                            name: '珠宝编号',
                            prop: 'productId'
                        },
                        {
                            name: '名称',
                            prop: 'productName'
                        },
                        {
                            name: '价格',
                            prop: 'price'
                        },
                        {
                            name: '优惠价',
                            prop: 'jprice'
                        },
                        {
                            name: '材质',
                            prop: 'material'
                        },
                        {
                            name: '库存',
                            prop: 'stock'
                        },
                        {
                            name: '销量',
                            prop: 'sale'
                        },
                    ]
                }
            }
        },
        methods: {
            isLogin() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '../login.html';
                    } else {
                        this.user = res.data.data;
                    }
                })
            },
            addCategory(level) {
                this.categoryDialogInfo.title = "类别添加";
                this.openCategoryDialog(level);
            },
            openCategoryDialog(level) {
                this.category.pId = null;
                this.category.cId = null;
                this.category.name = '';
                this.categoryDialogInfo.level = level;
                this.categoryDialogInfo.isShow = true;
            },
            openProductDialog() {
                this.product = {};
                this.productDialogInfo.isShow = true;
            },
            /**
             * 更新页面数据
             */
            updateData() {
                this.getAllCategory();
                this.getCategories();
                this.getChildCategories();
            },
            /**
             * 获取所有父类类别, 其中包含了其子类所有信息的集合
             */
            getCategories() {
                axios.get('/category').then(res => {
                    if (res.status === 200) {
                        this.categories = res.data.data;
                    } else {
                        console.error(res.data);
                    }
                });
            },
            /**
             * 获取子类类别
             */
            getChildCategories() {
                axios.get('/category/child').then(res => {
                    if (res.status === 200) {
                        this.childCategories = res.data.data;
                    } else {
                        console.error(res.data);
                    }
                });
            },
            /**
             * 添加或更新类别
             */
            addOrUpdateCategory() {
                axios.post("/category", {
                    categoryName: this.category.name,
                    parentId: this.category.pId,
                    categoryId: this.category.cId
                }).then(res => {
                    if (res.status === 200) {
                        if (res.data.message === 'success') {
                            this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            this.updateData();
                            this.name = '';
                            this.categoryDialogInfo.isShow = false;
                        } else if (res.data.message === 'fail') {
                            this.$message.error('添加失败, 类型已存在');
                        }
                    }
                })
            },
            removeCategory(category) {
                axios.delete("/category/" + category.categoryId).then(res => {
                    if (res.status === 200) {
                        if (res.data.data === true) {
                            this.updateData();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            if (category.levelName === '一级') {
                                this.$message.error('删除失败：存在子类类别');
                            } else if (category.levelName === '二级') {
                                this.$message.error('删除失败：当前类别存在商品');
                            }
                        }
                    }
                })
            },
            addProduct() {
                axios.post("/pro", this.product).then(resp => {
                    if (resp.data.message === "success") {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.getProduct();
                        this.product = {};
                        this.productDialogInfo.isShow = false;
                    } else {
                        this.$message.error('操作失败');
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            getAllCategory() {
                axios.get("/category/all").then(res => {
                    if (res.status === 200) {
                        this.tableData = res.data.data;
                        // this.categories = res.data.data;
                    }
                })
            },
            getProduct() {
                axios.get("/pro/showAll")
                    .then(resp => {
                        this.tableData = resp.data;
                    }).catch(error => {
                    console.log(error);
                })
            },
            /**
             * 点击了那个类别
             * @param index 类别的索引
             */
            handleOpen(index) {
                this.index = index;
                if (index === 'category') {
                    this.getAllCategory();
                } else if (index === 'product') {
                    this.getProduct();
                } else if (index === 'order') {
                    this.order();
                } else if (index === 'user') {
                    this.goUser();
                }
            },
            goUser() {
                window.location.href = "user/show.html";
            },
            order() {
                window.location.href = "../front/order/show.html";
            },
            updateProduct(product) {
                this.product = product;
                this.productDialogInfo.isShow = true;
            },
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            removeProduct(productId) {
                console.log(productId)
                axios.delete("/pro/" + productId)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.message === "success") {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getProduct();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
            edit(obj) {
                if (this.index === 'category') {
                    this.categoryDialogInfo.title = '编辑类别';
                    if (obj.levelName === '一级') {
                        this.openCategoryDialog(1);
                    } else if (obj.levelName === '二级') {
                        this.openCategoryDialog(2);
                    }
                    this.category.pId = obj.parentId;
                    this.category.cId = obj.categoryId;
                    this.category.name = obj.categoryName;
                } else if (this.index === 'product') {
                    this.updateProduct(obj);
                }
            },
            remove(obj) {
                if (this.index === 'category') {
                    this.removeCategory(obj);
                } else if (this.index === 'product') {
                    this.removeProduct(obj.productId);
                }
            },
            handleAvatarSuccess(res) {
                this.Url=res;
                this.product.imageUrl = this.Url;
            }
        }
    });
</script>
</html>